import React,{useState,useEffect} from 'react'
import {Wrapper,Top, Tab, TabItem,TabItemFloat} from './style'
import Routes from '@/routes/index'
import { useNavigate, NavLink,Outlet } from 'react-router-dom'
import Footer from '@/components/Footer'
import { debounce } from "@/api/utils";
import Logo from '@/components/common/logo';

const Home = () => {
  const navigate = useNavigate()
  const [show,setShow]=useState(true)
    useEffect(()=>{
        debounce(window.addEventListener('scroll',handleScrollTop),1000)
        function handleScrollTop(){
          const top = document.documentElement.scrollTop //获取scroll偏移值
          if(top>10){
            setShow(false)
          }else{
            setShow(true)
          }
        }
        },[])
  return (
    <Wrapper>
      <Tab>
          <NavLink to="/home/follow">
              <TabItem>
                  <span>关注</span>
              </TabItem>
          </NavLink>
          <NavLink to="/home/find">
              <TabItem>
                  <span>发现</span>
              </TabItem>
          </NavLink>
          <NavLink to="/home/local">
              <TabItem>
                  <i className='iconfont icon-dingwei'></i>
                  <span>当地</span>
              </TabItem>
          </NavLink>
          
      </Tab>
      <TabItemFloat>
            <TabItem>
                <i className='iconfont icon-xiaoxi' 
                  onClick={() => alert("用户中心正在开发中，敬请期待:)")}></i>
            </TabItem>
      </TabItemFloat>
       <Top>
          <input type="text" className='inp' placeholder='  搜索地点/景点/酒店等' onClick={() => navigate("/search")} />
          <button className='btn'>
            <i className='iconfont icon-sousuo'></i>
          </button>
      </Top>      
      <Outlet />
      {
        show==true ? <Footer />:<Logo/>
      }
      {/* <Footer /> */}
    </Wrapper>
  )
}

export default Home
